<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
    width="500">
    <el-form :model="form">
      <el-form-item label="证书类型" label-width="100px">
        <el-select v-model="form.type" class="m-2" placeholder="请选择证书类型">
          <el-option v-for="item in typeArr" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="学员姓名" label-width="100px">
        <el-input v-model="form.name" placeholder="请输入学员姓名" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证号" label-width="100px">
        <el-input v-model="form.idNumber" maxlength="18" placeholder="请输入身份证号" autocomplete="off" />
      </el-form-item>
      <el-form-item label="培训工种" label-width="100px">
        <el-input v-model="form.subject" placeholder="请输入培训工种" autocomplete="off" />
      </el-form-item>
      <el-form-item label="培训地点" label-width="100px">
        <el-input v-model="form.address" placeholder="请输入培训地点" autocomplete="off" />
      </el-form-item>
      <el-form-item label="培训开始时间" label-width="100px">
        <el-date-picker v-model="form.startTime" type="date" value-format="YYYY-MM-DD"
          placeholder="请选择培训开始时间" :editable="false" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="培训结束时间" label-width="100px">
        <el-date-picker v-model="form.endTime" type="date" value-format="YYYY-MM-DD"
          placeholder="请选择培训结束时间" :editable="false" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="培训学时" label-width="100px">
        <el-input type="number" v-model="form.hours" min="1" placeholder="请输入培训学时" autocomplete="off" />
      </el-form-item>
      <el-form-item label="印章图片" label-width="100px">
        <div class="avatar-uploader" v-if="form.stampImg" style="margin-right: 8px;">
          <el-image :src="form.stampImg" class="avatar" fit="cover" :preview-src-list="[form.stampImg]"></el-image>
        </div>
        <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
          :show-file-list="false" :on-success="stampImgSuccess">
          <el-icon class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="签名图片" label-width="100px">
        <div class="avatar-uploader" v-if="form.signImg" style="margin-right: 8px;">
          <el-image :src="form.signImg" class="avatar" fit="cover" :preview-src-list="[form.signImg]"></el-image>
        </div>
        <el-upload class="avatar-uploader" action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
          :show-file-list="false" :on-success="signImgSuccess">
          <el-icon class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="发证时间" label-width="100px">
        <el-date-picker v-model="form.pubdate" type="date" value-format="YYYY-MM-DD" placeholder="请选择发证时间"
          :editable="false" style="width: 100%;" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="confirmFn">颁发</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  forms: {
    type: Object
  }
})
const form = props.forms;
const typeArr = ref(['理论', '实操'])
// 取消
const emit = defineEmits()
const cancelFn = () => {
  emit('pick', { visible: false })
}
// 上传后
function stampImgSuccess({ errno, errmsg, result }) {
  if (errno === 0) {
    form.stampImg = result[0];
    return false
  }
}
function signImgSuccess({ errno, errmsg, result }) {
  if (errno === 0) {
    form.signImg = result[0];
    return false
  }
}
// 确认
const confirmFn = () => {
  emit('pick', { visible: false, form })
}
</script>

<style lang="less" scoped>
.avatar-uploader {
  border: 1px solid #DCDFE6;
  border-radius: 3px;
  background: #FFFFFF;

  &:hover {
    border-color: #C0C4CC;
  }

  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }

  .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #D6D6D6;
    width: 148px;
    height: 148px;
    text-align: center;

    &:hover {
      color: #C0C4CC;
    }
  }
}
</style>